<template>
	<view class="container">
		<view class="Recharge_amount">
			<view class="amount" v-for="amount in amounts" :key="amount" :class="{'active': highlightedAmount === amount}" @click="highlightAmount(amount)">{{amount}}</view>
		</view>
		<button class="recharge_btn" @click="recharge" v-if="highlightedAmount">{{'充值' + highlightedAmount}}</button>
		<button class="recharge_btn" v-if="!highlightedAmount">立即充值</button>
		<view class="recharge_wx" v-show="showImage">
			<image src="../../static/wxzf.jpg" mode="aspectFit"></image>
		</view>
		<view v-show="showMask" @click.stop="" class="mask"></view>
	</view>
</template>

<script>
	import request from '../../utils/request.js'
	export default{
		data(){
			return{
				amounts: ['20元', '30元', '50元', '100元', '200元', '500元'],
				highlightedAmount: null,
				time: new Date().getTime(),
				showImage: false,
				showMask: false,
			}
		},
		methods: {
			highlightAmount(amount) {
			      this.highlightedAmount = amount;
			    },
			recharge() {
					console.log('充值金额为' + this.highlightedAmount)
					const amountWithoutUnit = this.highlightedAmount.replace(/[^0-9]/g, ''); // 使用正则表达式移除所有非数字字符
					const amountAsInt = parseInt(amountWithoutUnit, 10); // 将字符串转换为整数
					console.log(amountAsInt);
					request.post('/wx/cz', {
						f1002: amountAsInt
					}, {
						headers: { 'content-type': 'application/json' },
					}).then(res => {
						console.log(res.data);
					})
					this.showImage = true;
					this.showMask = true;
					setTimeout(() => {
					    this.showImage = false;
					    this.showMask = false;
					    uni.showToast({
					       title: '充值成功',
					       icon: 'success',
					       duration: 2000
					      });
						setTimeout(() => {
						    uni.switchTab({
						        url: '/pages/index/index'
						    });
					      }, 500);
					    }, 5000);
						// request.get('https://cq.kaifahou.com/').then(res => {
						// 	console.log(res.data);
						// })	
				      // 调用支付接口
				  //     uni.requestPayment({
				  //       provider: 'wxpay',
				  //       orderInfo: {
						// 	account: this.account,
						// 	highlightedAmount: this.highlightedAmount
						// },
						// timeStamp: this.time.toString(),
						// nonceStr: 'WQWHEBIFIQBmkk', //随机字符串
						// package: 'prepay_id=wx36655566231dawda855', //
						// paySign: '322D081056226265651FWA',
						// signType: 'MD5',
						
				  //       success: (res) => {
				  //         console.log(res + '支付成功');
				  //         // 处理支付成功的逻辑
				  //       },
				  //       fail: (err) => {
				  //         console.log('支付失败', err);
				  //         // 处理支付失败的逻辑
				  //       }
				  //     });
				},
		},
	}
</script>

<style lang="scss" scoped>
	.container{
		padding: 5rpx 10rpx 0rpx;
		position: relative;
		.mask {
			 position: fixed;
			  top: 0;
			  left: 0;
			  right: 0;
			  bottom: 0;
			  background-color: rgba(0, 0, 0, 0.5);
			  z-index: 9; 
		}
		.recharge_wx {
			position: absolute;
			top: 300rpx;
			left: 80rpx;
			z-index: 10;
		}
		.recharge_btn {
			margin-top: 100rpx;
		    background-color: #5064eb;
		}
		.Recharge_amount {
			margin-top: 50rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-wrap: wrap;
			.amount {
				text-align: center;
				line-height: 150rpx;
				width: 30%;
				height: 150rpx;
				border: 1px #545454 solid;
				margin: 20rpx 10rpx 0;
				border-radius: 10rpx;
			}
			.active {
				background-color: #5a8ddf;
			}
		}
	}
	
</style>

